<template>
	<view class="container">

		<!-- 顶部换算 -->
		<view class="header">
			<image src="../../static/equity_img/ad.png" mode=""></image>
			<view class="part m_l20">
				<text class="colorfff font38">1AD</text>
				<view class="bot colorb6 font26">
					<text>≈$ 2.78</text>
					<text class="m_l60">≈¥ 10.78</text>
				</view>
			</view>

			<!-- K线图 -->


		</view>

		<!-- 4个权益选项 -->
		<view class="choose">
			<view class="choose_box" v-for="(item, index) in chooseList" :key="index" @tap="go(index)">
				<image :src="item.img" mode=""></image>
				<text class="font26 m_t14">{{item.title}}</text>
			</view>
		</view>

		<!-- banner -->
		<view class="banner">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
				<!-- indicator-color='rgba(255,255,255,0.3)' -->
				<swiper-item v-for="(item,index) in bannerlist" :key='index'>
					<view class="swiper-item">
						<image :src="item.img" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- tab切换3*3 -->
		<view class="uni-tab-bar">

			<view class="mainContentHead">
				<scroll-view id="tab-bar" class="uni-swiper-tab font32 color666 bold" scroll-x :scroll-left="scrollLeft">
					<view v-for="(tab,index) in tabBars" :key="index" class="swiper-tab-list" :class="tabIndex==index ? 'active' : ''"
					 :data-current="index" @click="tapTab(index)">
						<view>{{tab.name}}</view>
					</view>
				</scroll-view>
			</view>

			<swiper :current="tabIndex" class="swiper-box" duration="300" @change="changeTab">
				<swiper-item class="relative_item" v-for="(item,index) in tabBars" :key="index">
					
					<!-- 买入first tab -->
					<scroll-view class="list" scroll-y @scrolltolower="loadMore(index)" v-if="tabIndex==0">
						<view class="buyIn pd_lr30">
							<view class="publish m_t30 shadow" @tap="newOrder">
								<text class="font30 color5b">发布订单</text>
								<image src="../../static/my_img/arrow_r.png" mode=""></image>
							</view>
							<view class="business_box m_t20">
								<view class="buy_left">
									<view class="title">
										<view class="cheng colorfff font30" style="background: url(../../static/equity_img/circle.png);background-repeat: no-repeat;background-size: 100% 100%;">诚</view>
										<text class="bold color5b font30">诚信买卖</text>
									</view>
									<view class="number color5b">
										<text class="font32 m_r20">0.900</text>
										<text class="font26">OTC</text>
									</view>
									<view class="count font26">
										数量 25300.00
									</view>
									<view class="limit font26">
										限额 2000.00-15000.00
									</view>
								</view>
								<view class="buy_right">
									<view class="dan_count font26">
										已成交<text style="color: #676884;margin: 0 6upx;">84</text>单
									</view>
									<view class="imgs m_t6">
										<image src="../../static/equity_img/ali.png" mode=""></image>
										<image src="../../static/equity_img/wx.png" mode=""></image>
									</view>
									<view class="buy_btn m_t10" @tap="buyOTC">
										<button class="font30" type="primary">买入</button>
									</view>
								</view>
							</view>
							<view class="business_box m_t20">
								<view class="buy_left">
									<view class="title">
										<view class="cheng colorfff font30" style="background: url(../../static/equity_img/circle.png);background-repeat: no-repeat;background-size: 100% 100%;">诚</view>
										<text class="bold color5b font30">诚信买卖</text>
									</view>
									<view class="number color5b">
										<text class="font32 m_r20">0.900</text>
										<text class="font26">OTC</text>
									</view>
									<view class="count font26">
										数量 25300.00
									</view>
									<view class="limit font26">
										限额 2000.00-15000.00
									</view>
								</view>
								<view class="buy_right">
									<view class="dan_count font26">
										已成交<text style="color: #676884;margin: 0 6upx;">84</text>单
									</view>
									<view class="imgs m_t6">
										<image src="../../static/equity_img/ali.png" mode=""></image>
										<image src="../../static/equity_img/wx.png" mode=""></image>
									</view>
									<view class="buy_btn m_t10" @tap="buyOTC">
										<button class="font30" type="primary">买入</button>
									</view>
								</view>
							</view>
							<view class="business_box m_t20">
								<view class="buy_left">
									<view class="title">
										<view class="cheng colorfff font30" style="background: url(../../static/equity_img/circle.png);background-repeat: no-repeat;background-size: 100% 100%;">诚</view>
										<text class="bold color5b font30">诚信买卖</text>
									</view>
									<view class="number color5b">
										<text class="font32 m_r20">0.900</text>
										<text class="font26">OTC</text>
									</view>
									<view class="count font26">
										数量 25300.00
									</view>
									<view class="limit font26">
										限额 2000.00-15000.00
									</view>
								</view>
								<view class="buy_right">
									<view class="dan_count font26">
										已成交<text style="color: #676884;margin: 0 6upx;">84</text>单
									</view>
									<view class="imgs m_t6">
										<image src="../../static/equity_img/ali.png" mode=""></image>
										<image src="../../static/equity_img/wx.png" mode=""></image>
									</view>
									<view class="buy_btn m_t10" @tap="buyOTC">
										<button class="font30" type="primary">买入</button>
									</view>
								</view>
							</view>
							<view class="business_box m_t20">
								<view class="buy_left">
									<view class="title">
										<view class="cheng colorfff font30" style="background: url(../../static/equity_img/circle.png);background-repeat: no-repeat;background-size: 100% 100%;">诚</view>
										<text class="bold color5b font30">诚信买卖</text>
									</view>
									<view class="number color5b">
										<text class="font32 m_r20">0.900</text>
										<text class="font26">OTC</text>
									</view>
									<view class="count font26">
										数量 25300.00
									</view>
									<view class="limit font26">
										限额 2000.00-15000.00
									</view>
								</view>
								<view class="buy_right">
									<view class="dan_count font26">
										已成交<text style="color: #676884;margin: 0 6upx;">84</text>单
									</view>
									<view class="imgs m_t6">
										<image src="../../static/equity_img/ali.png" mode=""></image>
										<image src="../../static/equity_img/wx.png" mode=""></image>
									</view>
									<view class="buy_btn m_t10" @tap="buyOTC">
										<button class="font30" type="primary">买入</button>
									</view>
								</view>
							</view>
							<view class="business_box m_t20">
								<view class="buy_left">
									<view class="title">
										<view class="cheng colorfff font30" style="background: url(../../static/equity_img/circle.png);background-repeat: no-repeat;background-size: 100% 100%;">诚</view>
										<text class="bold color5b font30">诚信买卖</text>
									</view>
									<view class="number color5b">
										<text class="font32 m_r20">0.900</text>
										<text class="font26">OTC</text>
									</view>
									<view class="count font26">
										数量 25300.00
									</view>
									<view class="limit font26">
										限额 2000.00-15000.00
									</view>
								</view>
								<view class="buy_right">
									<view class="dan_count font26">
										已成交<text style="color: #676884;margin: 0 6upx;">84</text>单
									</view>
									<view class="imgs m_t6">
										<image src="../../static/equity_img/ali.png" mode=""></image>
										<image src="../../static/equity_img/wx.png" mode=""></image>
									</view>
									<view class="buy_btn m_t10" @tap="buyOTC">
										<button class="font30" type="primary">买入</button>
									</view>
								</view>
							</view>
							<view class="business_box m_t20">
								<view class="buy_left">
									<view class="title">
										<view class="cheng colorfff font30" style="background: url(../../static/equity_img/circle.png);background-repeat: no-repeat;background-size: 100% 100%;">诚</view>
										<text class="bold color5b font30">诚信买卖</text>
									</view>
									<view class="number color5b">
										<text class="font32 m_r20">0.900</text>
										<text class="font26">OTC</text>
									</view>
									<view class="count font26">
										数量 25300.00
									</view>
									<view class="limit font26">
										限额 2000.00-15000.00
									</view>
								</view>
								<view class="buy_right">
									<view class="dan_count font26">
										已成交<text style="color: #676884;margin: 0 6upx;">84</text>单
									</view>
									<view class="imgs m_t6">
										<image src="../../static/equity_img/ali.png" mode=""></image>
										<image src="../../static/equity_img/wx.png" mode=""></image>
									</view>
									<view class="buy_btn m_t10" @tap="buyOTC">
										<button class="font30" type="primary">买入</button>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
					
					<!-- 卖出second tab -->
					<scroll-view class="list" scroll-y @scrolltolower="loadMore(index)" v-if="tabIndex==1">
						<view class="buyOut pd_lr30">
							<view class="publish m_t30 shadow" @tap="newOrder">
								<text class="font30 color5b">发布订单</text>
								<image src="../../static/my_img/arrow_r.png" mode=""></image>
							</view>
							<view class="business_box m_t20">
								<view class="buy_left">
									<view class="title">
										<view class="cheng colorfff font30" style="background: url(../../static/equity_img/circle.png);background-repeat: no-repeat;background-size: 100% 100%;">诚</view>
										<text class="bold color5b font30">诚信买卖</text>
									</view>
									<view class="number color5b">
										<text class="font32 m_r20">0.900</text>
										<text class="font26">OTC</text>
									</view>
									<view class="count font26">
										数量 25300.00
									</view>
									<view class="limit font26">
										限额 2000.00-15000.00
									</view>
								</view>
								<view class="buy_right">
									<view class="dan_count font26">
										已成交<text style="color: #676884;margin: 0 6upx;">84</text>单
									</view>
									<view class="imgs m_t6">
										<image src="../../static/equity_img/ali.png" mode=""></image>
										<image src="../../static/equity_img/wx.png" mode=""></image>
									</view>
									<view class="buy_btn m_t10">
										<button class="font30" type="primary">卖出</button>
									</view>
								</view>
							</view>
							<view class="business_box m_t20">
								<view class="buy_left">
									<view class="title">
										<view class="cheng colorfff font30" style="background: url(../../static/equity_img/circle.png);background-repeat: no-repeat;background-size: 100% 100%;">诚</view>
										<text class="bold color5b font30">诚信买卖</text>
									</view>
									<view class="number color5b">
										<text class="font32 m_r20">0.900</text>
										<text class="font26">OTC</text>
									</view>
									<view class="count font26">
										数量 25300.00
									</view>
									<view class="limit font26">
										限额 2000.00-15000.00
									</view>
								</view>
								<view class="buy_right">
									<view class="dan_count font26">
										已成交<text style="color: #676884;margin: 0 6upx;">84</text>单
									</view>
									<view class="imgs m_t6">
										<image src="../../static/equity_img/ali.png" mode=""></image>
										<image src="../../static/equity_img/wx.png" mode=""></image>
									</view>
									<view class="buy_btn m_t10">
										<button class="font30" type="primary">卖出</button>
									</view>
								</view>
							</view>
							<view class="business_box m_t20">
								<view class="buy_left">
									<view class="title">
										<view class="cheng colorfff font30" style="background: url(../../static/equity_img/circle.png);background-repeat: no-repeat;background-size: 100% 100%;">诚</view>
										<text class="bold color5b font30">诚信买卖</text>
									</view>
									<view class="number color5b">
										<text class="font32 m_r20">0.900</text>
										<text class="font26">OTC</text>
									</view>
									<view class="count font26">
										数量 25300.00
									</view>
									<view class="limit font26">
										限额 2000.00-15000.00
									</view>
								</view>
								<view class="buy_right">
									<view class="dan_count font26">
										已成交<text style="color: #676884;margin: 0 6upx;">84</text>单
									</view>
									<view class="imgs m_t6">
										<image src="../../static/equity_img/ali.png" mode=""></image>
										<image src="../../static/equity_img/wx.png" mode=""></image>
									</view>
									<view class="buy_btn m_t10">
										<button class="font30" type="primary">卖出</button>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
					
					<!-- 委托单third tab -->
					<view class="small_tabs font26 color666" v-if="tabIndex==2">
						<view class="order_tab color5b">全部</view>
						<view class="order_tab">未付款</view>
						<view class="order_tab">已付款</view>
						<view class="order_tab">申诉中</view>
						<view class="order_tab">已取消</view>
						<view class="order_tab">已完成</view>
					</view>
					<scroll-view class="list" scroll-y @scrolltolower="loadMore(index)" v-if="tabIndex==2">
						<view class="entrust m_t60 pd_lr30">
							
							<view class="entrust_box m_t20">
								<view class="entrust_top">
									<view class="title">
										<view class="strip"></view>
										<text class="bold font30">买入OTC</text>
									</view>
									<view class="dan_count font26" style="color: #b5b9c9;">
										已成交<text style="color: #676884;margin: 0 6upx;">84</text>单
									</view>
								</view>
								<view class="entrust_center">
									<view class="number">
										<text class="font32 bold m_r20">8,422.00</text>
										<view class="count font26 m_t10" style="color: #676884;">
											买入数量: 20000
										</view>
									</view>
									<view class="orderStatus red font32 m_t10">
										待付款
									</view>
								</view>
								<view class="entrust_bot font26">
									<view class="orderNumber">
										订单号 215823552822258
									</view>
									<view class="orderTime">
										2019.06.04
									</view>
								</view>
							</view>
							
							<view class="entrust_box m_t20">
								<view class="entrust_top">
									<view class="title">
										<view class="strip"></view>
										<text class="bold font30">卖出OTC</text>
									</view>
									<view class="dan_count font26" style="color: #b5b9c9;">
										已成交<text style="color: #676884;margin: 0 6upx;">528455</text>单
									</view>
								</view>
								<view class="entrust_center">
									<view class="number">
										<text class="font32 bold m_r20">8,422.00</text>
										<view class="count font26 m_t10" style="color: #676884;">
											买入数量: 20000
										</view>
									</view>
									<view class="orderStatus red font32 m_t10">
										待付款
									</view>
								</view>
								<view class="entrust_bot font26">
									<view class="orderNumber">
										订单号 215823552822258
									</view>
									<view class="orderTime">
										2019.05.21
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chooseList: [{
					"img": "../../static/equity_img/icon_1.png",
					"title": "定期权益"
				}, {
					"img": "../../static/equity_img/icon_2.png",
					"title": "活期权益"
				}, {
					"img": "../../static/equity_img/icon_3.png",
					"title": "S级认购"
				}, {
					"img": "../../static/equity_img/icon_4.png",
					"title": "标准认购"
				}],
				bannerlist: [{
					"img": "../../static/equity_img/banner.png"
				}, {
					"img": "../../static/equity_img/banner.png"
				}, {
					"img": "../../static/equity_img/banner.png"
				}],
				tabIndex: 0, //tab下标
				scrollLeft: 0,
				tabBars: [{
					name: 'OTC买入',
					id: '1'
				}, {
					name: 'OTC卖出',
					id: '2'
				}, {
					name: '委托单',
					id: '3'
				}],
			}
		},
		onLoad() {

		},
		methods: {
			// 点击tab切换
			tapTab(index) {
				if (this.tabIndex === index) {
					return false;
				} else {
					let tabBar = this.getElSize("tab-bar"),
						tabBarScrollLeft = tabBar.scrollLeft; //点击的时候记录并设置scrollLeft
					this.scrollLeft = tabBarScrollLeft;
					this.tabIndex = index;
				}
			},
			
			//跟着切换
			changeTab(e) {
				let index = e.detail.current;
				let tabBar = this.getElSize("tab-bar"),
					tabBarScrollLeft = tabBar.scrollLeft;
				this.tabIndex = index;
			},
			
			//得到元素的size
			getElSize(id) {
				return new Promise((res, rej) => {
					uni.createSelectorQuery().select('#' + id).fields({
						size: true,
						scrollOffset: true
					}, (data) => {
						res(data);
					}).exec();
				});
			},
			
			// 发布订单
			newOrder() {
				uni.navigateTo({
					url: "/pages/equity/new_order"
				})
			},
			
			// OTC买入
			buyOTC() {
				uni.navigateTo({
					url: "../equity/buy"
				})
			},
			
			// 去往二级页面
			go(index) {
				if(index == 0) {
					uni.navigateTo({
						url: "../equity/regular"	//定期权益
					})
				} else if(index == 1) {
					uni.navigateTo({
						url: "../equity/current"	//活期权益	
					})
				} else if(index == 2) {
					uni.navigateTo({
						url: "../equity/s_level"	//S级认购
					})
					return;		//S级认购
				} else if(index == 3) {
					uni.navigateTo({
						url: "../equity/standard"	//标准认购
					})
				}
			}
			
		},
		onNavigationBarButtonTap() {
			console.log('权益卡页面里面的规则点击事件触发了')
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100vh;
		overflow: auto;

		// top换算
		.header {
			width: 100%;
			background: #5E81F7;
			display: flex;
			padding: 30upx 30upx 150upx 30upx;
			position: relative;

			image {
				width: 80upx;
				height: 80upx;
			}

			.part {
				display: flex;
				flex-direction: column;

				.bot {
					display: flex;
				}
			}

			// .K线图


		}

		// 四个选择
		.choose {
			padding: 200upx 30upx 30upx 30upx;
			display: flex;

			.choose_box {
				width: 25%;
				display: flex;
				align-items: center;
				flex-direction: column;

				image {
					width: 50upx;
					height: 50upx;
				}
			}
		}

		// banner
		.banner {

			// 整个轮播容器的高度需要调整
			uni-swiper {
				height: 200upx;
			}

			swiper swiper-item {
				display: flex;
				justify-content: center;
			}

			swiper swiper-item .swiper-item {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			image {
				width: 600upx;
				height: 160upx;
			}
		}

		// tab切换
		.uni-tab-bar {
			width: 100%;
			overflow: scroll;

			.uni-swiper-tab {
				border-bottom: 0;
				display: flex;
				justify-content: space-around;

				.swiper-tab-list {
					width: 33.3%;
					display: inline-block;
					text-align: center;
				}

				.swiper-tab-list view {
					display: inline-block;
					height: 100upx;
					line-height: 100upx;
					box-sizing: border-box;
				}

				#fanxian {
					text-align: left;
				}

				.active view {
					color: #5458B4;
					border-bottom: 4upx solid #6167e7;
				}
			}
		}

		.relative_item {
			position: relative;
			.small_tabs {
				width: 100%;
				padding: 16upx 0;
				display: flex;
				align-items: center;
				justify-content: space-around;
				border-top:1upx solid #f4f4fa;
				position: fixed;
				top: 0;
				background: #fdfdfe;
			}
		}
		
		.list {
			height: 90vh !important;
			overflow: scroll;
			
			.buyIn,
			.buyOut,
			.entrust {
				display: flex;
				align-items: center;
				flex-direction: column;
				border-top: 1px solid #EFEFF0;

				.business_box {
					width: 100%;
					padding: 30upx 24upx;
					background: #fff;
					border: 1upx solid #e8e9ea;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-radius: 10upx;

					.buy_left,
					.buy_right {
						display: flex;
						flex-direction: column;

						.title {
							display: flex;
							align-items: center;
							font-weight: bolder;

							.cheng {
								width: 60upx;
								height: 60upx;
								display: flex;
								align-items: center;
								justify-content: center;
								margin-right: 10upx;
							}
						}

						.number {
							font-weight: bolder;
						}

						.count,
						.limit {
							color: #9598a7;
						}

						.imgs {
							image {
								width: 30upx;
								height: 30upx;
								margin: 0 6upx;
							}
						}

						.dan_count {
							color: #b5b9c9;
						}

						.buy_btn {
							button {
								width: 180upx;
								height: 70upx;
								line-height: 70upx;
								background: linear-gradient(top, #628dfa, #4b56ef);
							}

							button::after {
								border: 0;
							}
						}
					}

					.buy_right {
						align-items: flex-end;
					}
				}
				
				.publish {
					width: 100%;
					padding: 24upx 30upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					background: #fff;
					border-radius: 10upx;

					image {
						width: 14upx;
						height: 20upx;
					}
				}

				.shadow {
					box-shadow: 0 0 10px 5px #e5e9ee;
				}
				
				.entrust_box {
					width: 100%;
					border-radius: 10upx;
					padding: 30upx 24upx;
					background: #fff;
					border: 1upx solid #e8e9ea;
					display: flex;
					flex-direction: column;
					
					.entrust_top,.entrust_center,.entrust_bot {
						width: auto;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 10upx 0;
						
						.title {
							display: flex;
							align-items: center;
							.strip {
								width:12upx;
								height:28upx;
								margin-right: 10upx;
								background: linear-gradient(top, #628dfa, #4b56ef);
							}
						}
						
						.red {
							color: #cf4638;
						}
					}
					
					.entrust_center {
						border-bottom: 1upx solid #f4f4fa;
					}
					.entrust_bot {
						padding: 20upx 0 0 0;
					}
				}
			}
			
			.entrust {
				border: 0;
			}
		}

		.swiper-box {
			height: 90vh !important;
			overflow: scroll;
			background: #f5f7f8;
			uni-swiper-item {
				overflow: scroll;
			}
		}
	}
</style>
